<template>

    <div class="" style="background-color: #f4f4f4">

                <HomeSwiper/>
                <div class="container page-component__scroll">
                    <el-tag class="painter-tab-active painter-tab-item">推荐作者</el-tag>
                </div>
                <div class="stage-home-painter-swiper">
                    <div>
                        <el-row class="swiper-painter-item">
                            <el-col :span="3" v-for="(author,index) in authors" :key="index">
                                <el-card class="swiper-painter-cards">
                                    <img :src="author.authorImg" class="image"  @click="gotoUser(author)">
                                    <span class="painter-item-name">
                                {{author.username}}
                            </span>
                                    <div class="introduction-motto">
                                        {{author.introduction}}
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <div class="container">
                    <el-tag class="painter-tab-active painter-tab-item">推荐作品</el-tag>
                </div>

                <div>
                    <el-row class="swiper-painter-item1">
                        <el-card class="swiper-painter-cards1" v-for="(workInfo,workId) in hotWorksInfo" :key="workId">
                            <button class="work-button" style="border: #ffffff">
                                <div v-if="workInfo.workFileType === 1"
                                     @click="workDetail(workInfo)">
                                    <img class="image1" :src="workInfo.workFilename"/>
                                </div>
                                <div v-else @click="workDetail(workInfo)">
                                    <video :poster="workInfo.poster" :controls="true" class="video_fo"
                                           :src="workInfo.workFilename"></video>
                                </div>
                                <div class="work-div">
                            <span class="painter-item-name">
                                {{workInfo.workName}}
                            </span>
                                </div>
                                <div class="introduction-motto">
                            <span class="author-span">
                                <img class="work-user-img" :src="workInfo.userImg">
                                <span class="author-span">
                                    {{workInfo.username}}
                                </span>
                            </span>
                                    <span class="star-span">
                                <i class="icon-favorites"></i>
                                {{workInfo.workLikesNums}}
                            </span>
                                </div>
                            </button>

                        </el-card>

                    </el-row>
                </div>



    </div>
</template>

<script>
    import HomeSwiper from "./HomeSwiper";
    import {selectAuthors} from "../assets/api/authorApi";
    import {selectHotWorks} from "../assets/api/workInfoApi";
    export default {
        data() {
            return {
                authors: [],
                active: "/",
                user: {},
                isLogin: false,
                hotWorksInfo: [],
                workImg: '',
                workInfo: {},
            }
        },
        components: {
            HomeSwiper,
        },
        methods: {
            authorRecommend() {
                selectAuthors(this.data).then((res) => {
                    this.authors = res.data.data;
                })
            },
            gotoUser(author){
                this.$router.push({path:'/authorPage',query:{id:author.userId}})
            },
            workDetail(work) {
                this.$router.push({path:'/workDetail',query:{id:work.workId}});
            },
            selectHotWorksInfo() {
                let data = {};
                selectHotWorks(data).then((res) => {
                    this.hotWorksInfo = res.data.data;
                })
            },

        },
        created() {
            this.authorRecommend();
            if (localStorage.token) {
                this.isLogin = true;
            }
            this.selectHotWorksInfo();
        }
    }


</script>


<style scoped>
    @import "../assets/css/amazeui.css";

    .painter-tab-active {
        background: #adb3fb;
        font-weight: 800;
    }

    .painter-tab-item {
        cursor: pointer;
        width: 150px;
        height: 36px;
        background: #adb3fb;
        border-radius: 4px;
        text-align: center;
        line-height: 36px;
        font-size: 16px;
        color: #000000;
        margin-right: 20px;
        margin-top: 40px;
    }

    .stage-home-painter-swiper {
        position: relative;
        margin-top: 18px;
        height: 220px;
        width: 1200px;
        background-color: #f4f4f4;
    }

    .swiper-painter-item {
        width: 1200px;
        height: 230px;
        background: #fff;
        border: 1px solid #f5f5f5;
        box-shadow: 0 8px 15px 0 rgba(0, 0, 0, .05);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-left: 186px;
        overflow: hidden;
        padding: 0 12px;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
    }

    .image {
        width: 100%;
        height: 100px;
        display: block;
        border-radius: 100%;
        background-color: #f4f4f4;
        cursor: pointer;
    }

    .painter-item-name {
        margin-top: 8px;
        font-size: 14px;
        color: #333;
        font-weight: 600;
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
        background-color: #f4f4f4;
    }

    .swiper-painter-cards {
        margin-top: 15px;
        height: 200px;
    }

    .introduction-motto {
        margin-top: 8px;
        font-size: 12px;
        color: #666;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    userImg {
        margin-right: 16px;
        margin-top: calc((48px - 32px) / 2);
        transition: all .2s ease-out;
        transform-origin: top center;
    }


    .video_fo {
        position: relative;
        width: 283px;
        height: 200px;
        left: -20px;
    }

    .swiper-painter-item1 {
        margin-left: 180px;
        overflow: hidden;
        padding: 0 12px;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
    }

    .swiper-painter-cards1 {
        margin-top: 15px;
        height: 400px;
        margin-left: 10px;
        width: 300px;
    }

    .painter-item-name {
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
        font-size: 14px;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        margin-left: -20px;

    }

    .introduction-motto {
        background-color: #ffffff;
        margin-top: 8px;
        font-size: 14px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        margin-left: -10px;
        text-justify: inter-ideograph;
    }

    .image1 {
        width: 100%;
        height: 250px;
        display: block;
        margin: 0 auto
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .star-span {
        color: #adb3fb;
        float: right;
        background-color: #ffffff;
        margin-top: 20px;
        margin-right: 15px;
    }

    .author-span {
        color: #777;
        font-size: 14px;
        max-width: 154px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: #ffffff;
    }

    .work-user-img {
        width: 55px;
        height: 55px;
        border-radius: 100%;
    }

    .work-div {
        background-color: #ffffff;
        margin-top: 20px;
        margin-left: -30px;
    }

    .work-button {
        background-color: #ffffff;
        border: #fff;
        text-align: center;
    }

    .panel img {
        width: 300px;
        height: 400px;
        padding: 70px;
    }
    a {
        text-decoration: none;
    }
    .page-component__scroll{
        overflow: hidden;
    }
</style>
